<!-- 能源计划 -->
<template>
    <div class="energyplanMessage">
        <div class="slider">
            <el-select
                v-model="energyplanType"
                style="width: 100%; margin-bottom: 6px"
                size="small"
                @change="changeEnergyType"
                placeholder="请选择能源类型"
            >
                <el-option
                    v-for="item in energyplanOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                />
            </el-select>

            <el-input
                style="margin-bottom: 6px"
                size="small"
                placeholder="输入分项名称进行过滤"
                v-model="filterText"
                clearable
            />
            <el-tree
                ref="tree"
                node-key="id"
                class="energy-tree"
                :highlight-current="true"
                :data="treeData"
                :expand-on-click-node="false"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :filter-node-method="filterNode"
                :default-expanded-keys="expandedKey"
            ></el-tree>
        </div>
        <div class="container-warpper">
            <div class="search">
                <el-form :inline="true" class="form">
                    <el-form-item label="计划粒度:">
                        <el-select
                            v-model="timeCode"
                            size="small"
                            style="width: 120px"
                            placeholder="请选择计划粒度"
                            @change="handleChangeTime"
                        >
                            <el-option
                                v-for="item in dateTypeOptions"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            />
                        </el-select>
                        <el-date-picker
                            v-if="timeCode === 'year'"
                            style="margin-left: 6px"
                            v-model="dateTime"
                            size="small"
                            :clearable="false"
                            type="year"
                            value-format="yyyy"
                            placeholder="选择时间"
                        />
                        <el-date-picker
                            v-else
                            style="margin-left: 6px"
                            v-model="dateTime"
                            size="small"
                            :clearable="false"
                            type="month"
                            value-format="yyyy-MM"
                            placeholder="选择时间"
                        />
                        <el-button
                            type="primary"
                            size="small"
                            style="margin-left: 6px"
                            :disabled="disabled"
                            icon="el-icon-search"
                            @click="runBootstrap"
                            >搜索</el-button
                        >
                    </el-form-item>
                </el-form>
                <div
                    ><el-button type="primary" size="small" @click="handleSetting"
                        >配置能源计划</el-button
                    ></div
                >
            </div>
            <card-item :source="cardSource"></card-item>
            <el-progress
                class="process"
                :text-inside="true"
                :stroke-width="20"
                :percentage="progressData"
            ></el-progress>
            <bar style="width: 100%; height: 220px" :source="barSource" :unit="getUnit"></bar>
            <el-table class="table-container customTableClass" :data="tableData" :height="380">
                <el-table-column label="序号" type="index" width="50" />
                <el-table-column prop="planDateStr" label="时间" />
                <el-table-column prop="planAmount" label="能源计划">
                    <template slot-scope="{ row }">{{ row.planAmount || '-' }}</template>
                </el-table-column>
                <el-table-column prop="actualAmount" label="能源实绩">
                    <template slot-scope="{ row }">{{ row.actualAmount || '-' }}</template>
                </el-table-column>
                <el-table-column prop="amount" label="计划余量">
                    <template slot-scope="{ row }">{{ row.amount || '-' }}</template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    import { findEnergyPlanData } from '@/api/energyplanMessage.js'
    import {
        findEnergySelect,
        findEnumOptions,
        findProjectSubitemTreeByEnergyType,
    } from '@/api/common'
    import CardItem from './components/CardItem'
    import Bar from './components/bar'
    import FormModal from './components/FormModal'

    export default {
        name: 'energyplanMessage',
        components: {
            FormModal,
            CardItem,
            Bar,
        },
        computed: {
            disabled() {
                return !this.currentSelectNode
            },
            getUnit() {
                const target = this.energyplanOptions.find(
                    (item) => item.code === this.energyplanType
                )
                return target && target.unit ? target.unit : ''
            },
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val)
            },
        },
        data() {
            return {
                filterText: '',
                energyplanType: '',
                defaultProps: {
                    label: 'name',
                },
                expandedKey: [],
                treeData: [],

                timeCode: '',
                dateTime: dayjs().format('YYYY'),
                cardSource: [
                    { name: '能源计划', value: 0, unit: '' },
                    { name: '能源实绩', value: 0, unit: '' },
                    { name: '计划余量', value: 0, unit: '' },
                    { name: '计划余量占比', value: 0, unit: '%' },
                ],
                barSource: [],
                tableData: [],
                progressData: 0,
                energyplanOptions: [],
                dateTypeOptions: [],
                currentSelectNode: null,
            }
        },

        created() {
            this.initData()
        },
        methods: {
            changeEnergyType(val) {
                if (val) {
                    findProjectSubitemTreeByEnergyType({
                        projectId: this.$store.state.projectId,
                        energyType: this.energyplanType,
                    }).then((resp) => {
                        const { data } = resp
                        if (data && data.length) {
                            this.treeData = data
                            const id = data[0].id
                            this.expandedKey = [id]
                            this.currentSelectNode = { id: data[0].parentId === '-1' ? '' : id }
                            this.runBootstrap()
                        }
                    })
                }
            },
            async initData() {
                // 能源类型
                const { data: energyOptions } = await findEnergySelect(this.$store.state.projectId)
                this.energyplanOptions = energyOptions
                this.energyplanType = this.getDefaultFirst(energyOptions)

                // 时间类型
                const { data: energyPlanOptions } = await findEnumOptions('energyPlanTime')
                this.dateTypeOptions = energyPlanOptions
                this.timeCode = this.getDefaultFirst(energyPlanOptions)

                // 分项树
                findProjectSubitemTreeByEnergyType({
                    projectId: this.$store.state.projectId,
                    energyType: this.energyplanType,
                })
                    .then((resp) => {
                        const { data } = resp
                        if (data && data.length) {
                            this.treeData = data
                            const id = data[0].id
                            this.expandedKey = [id]
                            this.currentSelectNode = { id: data[0].parentId === '-1' ? '' : id }
                        }
                    })
                    .finally(() => {
                        this.runBootstrap()
                    })
            },
            getDefaultFirst(data) {
                let result = ''
                if (data && data.length) {
                    result = _.head(data).code
                }
                return result
            },
            handleChangeTime(value) {
                const formatText = value === 'year' ? 'YYYY' : 'YYYY-MM'
                this.dateTime = dayjs().format(formatText)
            },
            handleNodeClick(data, node) {
                if (data.parentId === '-1') {
                    data.id = ''
                }
                this.currentSelectNode = data
                this.runBootstrap()
            },

            runBootstrap() {
                const { id } = this.currentSelectNode
                const params = {
                    projectId: this.$store.state.projectId,
                    subitemId: id,
                    timeCode: this.timeCode,
                    time: this.dateTime,
                    energyTypeCode: this.energyplanType,
                }
                if (this.timeCode === 'year') {
                    params.time = this.dateTime.split('-')[0]
                }

                findEnergyPlanData(params).then((resp) => {
                    const { code, data } = resp
                    if (code === 200 && data) {
                        const {
                            totalPlanAmount,
                            totalActualAmount,
                            amount,
                            amountRate,
                            energyPlanDataDetailList,
                            rate,
                        } = data
                        this.tableData = energyPlanDataDetailList
                        this.barSource = energyPlanDataDetailList
                        const unit = this.getUnit
                        this.cardSource = [
                            { name: '能源计划', value: totalPlanAmount || 0, unit },
                            {
                                name: '能源实绩',
                                value: totalActualAmount || 0,
                                unit,
                            },
                            { name: '计划余量', value: amount || 0, unit },
                            {
                                name: '计划余量占比',
                                unit: '%',
                                value: amountRate ? `${(amountRate * 100).toFixed(2)}` : '0',
                            },
                        ]

                        this.progressData = +parseFloat(rate * 100).toFixed(2)
                    }
                })
            },

            filterNode(value, data) {
                if (!value) return true
                return data.name.indexOf(value) !== -1
            },
            handleSetting() {
                new this.$pageModal(
                    FormModal,
                    {
                        props: {
                            title: '配置能源计划',
                        },
                    },
                    (result) => {
                        if (result) {
                            // this.tableRoot.onSearchChange()
                        }
                    }
                )
            },
        },
    }
</script>
<style lang="scss" scoped>
    .energyplanMessage {
        display: flex;
        height: 100%;
        .slider {
            width: 220px;
            padding: 12px;
            margin-right: 12px;
            background: $table-search-bg-color;
        }
        .container-warpper {
            flex: 1;
            overflow-y: auto;
            .search {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 20px;
                background: $table-search-bg-color;
            }
            .process {
                margin-bottom: 20px;
                padding: 0 10px;
            }
            .table-container {
                margin-top: 10px;
            }
        }
    }

    ::v-deep {
        .form .el-form-item {
            margin-bottom: 0 !important;
        }
        .divider {
            margin: 10px 0 !important;
        }
        .el-progress-bar__outer {
            background-color: rgba(235, 238, 245, 0.2);
        }

        // .customTree {
        //     background: transparent !important;
        //     .el-tree-node__label {
        //         color: #fff;
        //     }
        //     .el-tree-node__content {
        //         height: 40px;
        //         border: 1px solid #0b2e63 !important;
        //     }
        //     .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
        //     .el-tree-node__content:hover {
        //         background: linear-gradient(to right, rgba(0, 101, 232, 1), rgba(0, 101, 232, 0));
        //         border: 1px solid !important;
        //         border-image: linear-gradient(90deg, rgba(75, 174, 255, 1), rgba(104, 184, 255, 0))
        //             1 1 !important;
        //         border-right: none !important;
        //     }
        //     .el-tree-node.is-current .el-tree-node__content {
        //         background: linear-gradient(to right, rgba(0, 101, 232, 1), rgba(0, 101, 232, 0));
        //         border: 1px solid !important;
        //         border-image: linear-gradient(90deg, rgba(75, 174, 255, 1), rgba(104, 184, 255, 0))
        //             1 1 !important;
        //         border-right: none !important;
        //     }
        // }

        .customTableClass {
            &::after,
            &::before {
                background-color: transparent !important;
            }
        }

        .el-table {
            background: $table-bg;
            tr {
                background: $table-defalut-tr-bg;
            }
            .el-table__expand-icon {
                color: $table-search-text-color;
            }
            ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
                background: $table-striped-bg;
            }
            ::v-deep .el-table::before,
            .el-table--group::after,
            .el-table--border::after {
                background-color: $table-before-line-color;
            }
            ::v-deep .el-table__fixed-right::before {
                background-color: $table-before-line-color;
            }
            ::v-deep .el-pagination__total {
                color: $table-pagination-total-color;
            }
            ::v-deep .el-pagination__jump {
                color: $table-pagination-total-color;
            }
            ::v-deep .el-table__fixed::before {
                background-color: $table-before-line-color;
            }
            ::v-deep .el-pagination button:disabled {
                background-color: $com-bg-color;
            }
            ::v-deep .el-pager li {
                background: $com-bg-color;
            }
        }
    }
</style>
